﻿<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body {background-color:#4C92E7;padding:1em;margin:0px;font-family:Arial;}
.odd {background-color:#9FC4F3}
.even {background-color:#DCE9F9}
.odd, .even {
  padding:0px 1em;
  }
#data, #result {
  background-color:#9FC4F3;
  border:2px groove #ECE9D8;  
  margin:0px;
  padding:0px;
  padding-top:0.6em;
  }

#result {
  margin-top:1em;
  }

#dataLegend, #resultLegend {
  background-color:#DCE9F9;
  border:2px groove #ECE9D8;
  padding: 0.2em 0.5em;
  color:green;
  }

#dataLegend {
  position:absolute;
  right:2em;
  top:0.1em;
  }

.legendContainer {
  position:relative;
  width:100%;
  }

#resultLegend {
  position:absolute;
  right:1em;
  top:-1.5em;
  }

#add,#minus,#compute {
  padding:0px 1em;
  line-height:1.2;
  }

.left {
  float:left;
  width:25%;
  text-align:right;
  }

#url {
  width:70%;
  }

.fieldName, .fieldValue {
  width:35%;
  }

#rawQuery {
  width:65%;
  }

#methodText {
  width:6em;
  }

#languageContainer {
  position:relative;
  }

#language {
  position:absolute;
  right:2.3em;
  top:-1.5em;
  }

.resultUrl {
  width:73%;
  }

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="data">
<div id="dataLegend">資料</div>
<div class="odd">
  <label for="url" id="urlLabel" class="left">使用各種 method 的 url ：</label>
  <input id="url" type="text" />
</div>
<div class="even">
  <label for="general" id="generalLabel" class="left">一般查詢：</label>
  <input id="general" name="queryType" type="radio" value="general" />
  <button id="add">增加查詢欄位</button>
  <button id="minus">減少查詢欄位</button>
</div>
<div class="odd">
  <label for="raw" id="rawLabel" class="left">原始查詢字串：</label>
  <input id="raw" name="queryType" type="radio" value="raw" />
  <input id="rawQuery" type="text" />
</div>
<div class="even">
  <label for="method" id="methodLabel" class="left">請求 METHOD ：</label>
  <input id="methodText" type="text" readonly="true" />
  <select id="method">
    <option value="POST">POST</option>
    <option value="GET">GET</option>
    <option value="HEAD">HEAD</option>
    <option value="custom" id="custom">**自訂**</option>
  </select>
</div>
<div class="odd">
  <span class="left">&nbsp;</span>
  <button id="compute">運算</button>
</div>
<div id="languageContainer"><div id="language">
    <button id="chinese" >中文</button><button id="english">English</button>
</div></div>
</div>
<div id="result">
<div class="legendContainer"><div id="resultLegend">結果</div></div>
<div class="odd">
  <label for="html" id="htmlLabel" class="left">html + form + javascript：</label>
  <input id="html" type="text" class="resultUrl" readonly="true" />
</div>
<div class="even">
  <label for="svg" id="svgLabel" class="left">SVG + form + javascript：</label>
  <input id="svg" type="text" class="resultUrl" readonly="true" />
</div>
<div class="odd">
  <label for="python" id="pythonLabel" class="left">伺服器端（Python）：</label>
  <input id="python" type="text" class="resultUrl" readonly="true" />
</div>
</div>
<script>
$(function(a){var g=0,j=false;function h(b){h=function(){};if(!a("[name=queryType]:checked")[0])if(b==="general")a("#general").click();else b==="raw"&&a("#raw").click()}a("#add").click(function(){h("general");a(".field").stop(true,true);var b=a("<div></div>",{"class":"field"}).append(a("<span></span>",{"class":"left",html:"&nbsp;"})).append(a("<input />",{"class":"fieldName",id:"fieldName"+g})).append("=").append(a("<input />",{"class":"fieldValue",id:"fieldValue"+g})).hide().insertAfter(a(a(".field:last")[0]||
a("#data .odd:first")[0]));a("#data > div:not(:last)").removeClass("even odd").filter(":odd").addClass("odd").end().filter(":even:gt(0)").addClass("even");b.slideDown(400);++g});a("#minus").click(function(){h("general");a(".field").stop(true,true);a(".field:last").slideUp(400,function(){a(this).remove();--g;a("#data > div:not(:last)").removeClass("even odd").filter(":odd").addClass("odd").end().filter(":even:gt(0)").addClass("even")})});a("#rawQuery").focus(function(){a(this).unbind("focus");h("raw")});
a("#general").click(function(){j=false;a(".field").stop(true,true);a(".fieldName").removeAttr("disabled");a(".fieldValue").removeAttr("disabled");a("#add").removeAttr("disabled");a("#minus").removeAttr("disabled");a("#rawQuery").attr("disabled","disabled")});a("#raw").click(function(){j=true;a(".field").stop(true,true);a(".fieldName").attr("disabled","disabled");a(".fieldValue").attr("disabled","disabled");a("#add").attr("disabled","disabled");a("#minus").attr("disabled","disabled");a("#rawQuery").removeAttr("disabled")});
var k=a("#method").val();k!=="custom"?a("#methodText").val(k):a("#methodText").val("").removeAttr("readonly");a("#method").change(function(){var b=a("#method").val();b!=="custom"?a("#methodText").val(b):a("#methodText").val("").removeAttr("readonly").focus()});a("#compute").click(function(){for(var b=a("#url").val(),c=[],d,e=0,f=/[\:\/\=]/g;d=f.exec(b);e=d.index+1){c.push(encodeURIComponent(b.substring(e,d.index)));c.push(d[0])}c.push(encodeURIComponent(b.substring(e)));b=c.join("");if(a("#general:checked")[0]){c=
0;var i;for(f=[];i="#fieldName"+c,d="#fieldValue"+c++,(e=a(i))[0];)f.push(encodeURIComponent(e.val())+"="+encodeURIComponent(a(d).val()));if(f.length)b+="&query="+f.join("|")}else if(a("#raw:checked")[0])b+="&query="+encodeURIComponent(a("#rawQuery").val())+"&rawquery=true";if(i=a("#methodText").val())b+="&method="+i;if(j){a("#html").val("");a("#svg").val("")}else{a("#html").val("http://convert-get-proxy.appspot.com/form_js/?url="+b);a("#svg").val("http://convert-get-proxy.appspot.com/svg_form_js/?url="+
b)}a("#python").val("http://convert-get-proxy.appspot.com/server/?url="+b)});a("#english").click(function(){a("#dataLegend").text("data");a("#urlLabel").html("<b>url</b> using various method：");a("#generalLabel").html("<b>general</b> query：");a("#add").text("add query field");a("#minus").text("reduce query field");a("#rawLabel").html("<b>raw</b> query string：");a("#methodLabel").html("request <b>method</b>：");a("#custom").text("**custom**");a("#compute").text("compute");a("#resultLegend").text("result");
a("#pythonLabel").text("server side (Python) ：")});a("#chinese").click(function(){a("#dataLegend").text("資料");a("#urlLabel").text("使用各種 method 的 url ：");a("#generalLabel").text("一般查詢：");a("#add").text("增加查詢欄位");a("#minus").text("減少查詢欄位");a("#rawLabel").text("原始查詢字串：");a("#methodLabel").text("請求 METHOD ：");a("#custom").text("**自訂**");
a("#compute").text("運算");a("#resultLegend").text("結果");a("#pythonLabel").text("伺服器端（Python）：")});a(".resultUrl").focus(function(){var b=this;setTimeout(function(){b.select()},1)})});
</script>
</body>
</html>